@CHARSET "UTF-8";
html,body{
	background: #ff737c;
}
.container{
	background:#fff;
	-webkit-border-radius:2px;
	border-radius:2px;
	margin:10px;
	position:relative;
	padding-bottom:15px;
}
.container h3{
	font-size:16px;
	height:50px;
	padding-left: 20px;
	margin-bottom:10px;
}
.container h3 i{
	width:20px;
	height:20px;
	display: inline-block;
	background:url(img/scan-icon.png) no-repeat center/20px;
	vertical-align: middle;
	margin-right:4px;
}
.container h3 .title{
	float:left;
	background:url(img/scan-icon.png) no-repeat left center/20px;
	padding-left:25px;
	font-size:16px;
	margin-top:10px;
	color:#ff737c;
}
.container h3 span{
	float:right;
	border:1px solid #eeeeee;
	border-radius:15px;
	height:20px;
	line-height:18px;
	font-size:12px;
	padding:0 5px;
	margin-top:6px;
    color: #999;
    width:72px;
    text-align: center;
}
.container p{
	text-align: center;
	color:#999;
}
.container img{
	width:100%;
}
.container .one{
    margin: 5px 10px 0;
}
.container .two{
	width:168px;
	margin:20px auto 20px;
	border:1px solid #eeeeee;
	padding:8px;
}
.refresh{
	border:1px solid #eeeeee;
	-webkit-border-radius:15px;
	border-radius:15px;
	line-height:28px;
	text-align: center;
	width:80px;
	margin:0px auto 10px;
	display: block;
	color:#4c4c4c;
}
.refresh:active{
	background:#f2f2f2;
	color:#4c4c4c;
}
.refresh i{
	display: inline-block;
	width:28px;
	height:28px;
	background:url(img/refresh-icon.png) no-repeat center/18px;
	vertical-align: top;
}
.section{
	hegiht:50px;
	line-height:50px;
	margin:10px;
	background:rgba(255,255,255,0.1);
	color:#fff;
	padding:0 10px 0 15px;
	-webkit-border-radius:2px;
	border-radius:2px;
	font-size:15px;
}
.section b{
	float:right;	
	width:15px;
	height:50px;
	background:url(img/next-icon.png) no-repeat center/15px;
}

/* 翻转 */
.box{
	position: relative;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;
}
#card {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-o-transition: -o-transform 1s;
	transition: transform 1s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: right center;
	-moz-transform-origin: right center;
	-o-transform-origin: right center;
	transform-origin: right center;
}
#card.flipped {
	-webkit-transform: translate3d(-100%,0,0) rotate3d(0,1,0,-180deg);
	-moz-transform: translate3d(-100%,0,0) rotate3d(0,1,0,-180deg);
	-o-transform: translate3d(-100%,0,0) rotate3d(0,1,0,-180deg);
	transform: translate3d(-100%,0,0) rotate3d(0,1,0,-180deg);
}
#card .front,#card .back {
	position:absolute;
	display: block;
	height: 100%;
	width: 100%;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}
#card .back {
	background:#fff;
	-webkit-transform: rotate3d(0,1,0,180deg);
	-moz-transform: rotate3d(0,1,0,180deg);
	-o-transform: rotate3d(0,1,0,180deg);
	transform: rotate3d(0,1,0,180deg);
}
.cardNo{
    color: #4c4c4c;
    font-size:16px;
    text-align: center;
    padding-bottom:20px;
}
.cardImg{
	position:relative;
	margin:0 10px;
}
.cardImg .cardNo{
	position:absolute;
    color: #FFFFFF;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.4);
    line-height: 35px;
    border-radius: 0px 0px 10px 10px;
    width: 100%;
    padding: 0 10px;
    text-align: left;
}
.turn{
	width:50px;
	height:50px;
	background: url(img/turn-2.png) no-repeat center/50px;
	float:right;
}
.back .turn{
	background: url(img/turn-1.png) no-repeat center/50px;
}
.zIndex{
	z-index:-1;
}